<!DOCTYPE html>

<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
		<title>剩余寿命预测2</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/app.css" />
		<link rel="stylesheet" href="../css/font.css">
		<link rel="stylesheet" href="../css/formSelects-v4.css" />
		<!-- <link rel="stylesheet" href="../css/tablestyle.css"> -->

		<script src="../js/echarts.min.js"></script>
		<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
		<script>
		MathJax = {
			tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
		};
		</script>
		<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
	</head>
	
	<body class="bg01">
		<header class="header">
			<h3>设备剩余寿命预测</h3>
		</header>
		
		<div class="wrapper">
			<div class="container-fluid">
				<div class="row fill-h">
					<div class="col-lg-3 fill-h">
						<div class="xpanel-wrapper xpanel-wrapper-2">
							<div class="xpanel">
								<!-- 地图飞线 -->
								<div class="title-h" style="background:linear-gradient(to right,rgb(12, 36, 68),rgba(99, 89, 190, 0.719));">
									<p style="padding-top:6px; color:#fcfcfcc4; font-size: 20px;font-weight:bold">设备选择</span></p>
								</div> 
                                <div class="card1" style="width: 95%; margin-top: 10px; margin-left: 10px;background-color: #040d619f;"> 
									<div class="card-body">										
										<!-- <h5 class="card-title"> <span class="name">评估指标</span></h5> -->
										<span style="float: left; height: 50%; width: 30%; font-size: 15px;font-weight:bold; line-height: 34px; color: #fcfcfcc4;">设备地点：</span>
										<input id="tag4" style="width:calc(90% - 25%);resize:none; height: 34px;font-weight:bold; color:#e07510c4;float: right;background-color: transparent;" maxlength="10" value = "液化">
										<span style="float: left; height: 50%; width: 30%;font-size: 15px;font-weight:bold; line-height: 34px;color: #fcfcfcc4;">当前设备为：</span>
										<input id="tag5" style="width:calc(90% - 25%);resize:none; height: 34px;font-weight:bold;color:#e01010c4; float: right;background-color: transparent;" maxlength="10" value = "P2306D液化泵">
									</div>     
								</div>	
								<div class="card" style="width: 95%; margin-top: 10px; margin-left: 10px;background-color: #040d619f;"> 
									<div class="card-body">
										<h5 class="card-title"> <span class="name">评估指标</span></h5>
										<span style="float: left; height: 34px; width: 25%; line-height: 34px; color: #fcfcfcc4;">$Score：$</span>
										<input id="tag1" style="width:calc(90% - 20%);resize:none; height: 34px; float: right" maxlength="10" value = 0>
										<span style="float: left; height: 34px; width: 25%; line-height: 34px;color: #fcfcfcc4;">$RMSE：$</span>
										<input id="tag2" style="width:calc(90% - 20%);resize:none; height: 34px; float: right" maxlength="10" value = 0>
										<span style="float: left; height: 34px; width: 25%; line-height: 34px;color: #fcfcfcc4;">$R^2：$</span>
										<input id="tag3" style="width:calc(90% - 20%);resize:none; height: 34px; float: right" maxlength="10" value = 0>
									</div>     
								</div>               
							</div>
						</div>
						<div class="xpanel-wrapper xpanel-wrapper-2">
							<div id="app" class="xpanel">
								<!-- 世界地图 左下和右侧 -->
								<!-- <div class="fill-h" id="worldMap"></div> -->
								<div class="title-h" style="background:linear-gradient(to right,rgb(12, 36, 68),rgba(99, 89, 190, 0.719));">
									<p style="padding-top:6px; color:#fcfcfcc4; font-size: 20px;font-weight:bold">操作日志</span></p>
								</div> 
								<div class="table_position">
									<table class="table table-hover table-striped" style="color:#fcfcfcc4; font-size: 5px;">
										<thead>
											<tr>
												<th scope="col">序号</th>
												<th scope="col">设备地点</th>
												<th scope="col">监测设备</th>
												<th scope="col">剩余寿命/h</th>
												<th scope="col">操作人员</th>
												<th scope="col">操作日期</th>
											</tr>
										</thead>
										<tbody>
											<tr v-for="l in dinary">
												<th scope="row">{{l.idx}} </th>
												<td>{{l.pst}} </td>
												<td>{{l.eqt}}</td>
												<td>{{l.R}}</td>
												<td>{{l.peo}}</td>
												<td>{{l.dat}}</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div>
									<button type="button" class="btn btn-primary" @click="checking">更新日志</button>
									<button type="button" class="btn btn-danger" @click="clear" style="background-color: rgb(102, 156, 156); border: 1px solid rgb(101, 150, 150);">清除日志</button>
									<button  type="button" class="btn btn-primary" id ="yuce" style="margin-left:80px; width: 23%;background-color: rgb(109, 108, 29);">开始预测</button>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6 fill-h">
						<div class="xpanel-wrapper xpanel-wrapper-1">
							<div class="xpanel">
								<!-- 地图散点 中间-->
								<!-- <div  class="fill-h" id="lishi"></div> -->
								<div  class="fill-h" id="qushixian"></div>

							</div>
						</div>
						<div class="xpanel-wrapper xpanel-wrapper-1">
							<div  class="xpanel">
								<!-- 地图散点 中间-->
								<div  class="fill-h" id="lishi"></div>
							</div>
						</div>
					</div>
					<div class="col-lg-3 fill-h">
						<div class="xpanel-wrapper xpanel-wrapper-2">
							<div class="xpanel">
								<div class="fill-h">
									<div class="title-h" style="background:linear-gradient(to right,rgb(12, 36, 68),rgba(99, 89, 190, 0.719));">
										<p style="padding-top:6px; color:#fcfcfcc4; font-size: 20px;font-weight:bold">寿命标签</span></p>
									</div>
                                    <button  type="button" class="btn1 btn-primary" id="data_one">线性</button><button  type="button" class="btn1 btn-primary" id="data_two">分段式</button><button  type="button" class="btn1 btn-primary" id="data_three">自适应</button> 
                                    <div class="content" id="new_line"></div>
									<!-- <div id="wendu" style="height:75%; background-color:transparent;"></div> -->
								</div>								
							</div>
						</div>
						<div class="xpanel-wrapper xpanel-wrapper-2">
							<div class="xpanel">
								<!-- 城市地图 -->
								<div class="fill-h">
									<div class="title-h" style="background:linear-gradient(to right,rgb(12, 36, 68),rgba(99, 89, 190, 0.719));">
										<p style="padding-top:6px; color:#fcfcfcc4; font-size: 20px;font-weight:bold">设备剩余服役寿命</span></p>
									</div>
									<div id="fuyi" style="height:75%; background-color:transparent;"></div>
									<i class="iconfont" style="color:#fcfcfcc4;font-size: 20px;">&#xe6bb;</i>
									<label style="color:#fcfcfcc4; font-size: 18px; font-weight:normal" for="shichang">预计剩余服役时长为（小时）：</label>
									<input style="color:#fcfcfcc4; font-size: 18px; width: 70px; background-color: transparent; border: 0; outline: none;" type="text" value="3000" id = "shichang">
								</div>
							</div>
						</div>
						<!-- <div class="xpanel-wrapper xpanel-wrapper-3">
							<div class="xpanel">
								<!-- 区县地图 -->
								<!-- <div class="fill-h" id="countyMap"></div> -->
							</div>
						</div> -->
					</div>
				</div>
			</div>
		</div>
		
		<!-- <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> -->
		<!-- <script type="text/javascript" src="js/echarts-3.8.5.min.js"></script> -->
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
		
		<script src="../js/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript" src="../js/myjs.js"></script>
        <!-- <script type="text/javascript">draw(myColumns)</script> -->
		<!-- <script type="text/javascript" src="js/echarts-map-world.js"></script>
		<script type="text/javascript" src="js/echarts-map-china.js"></script> -->
		<!-- <script type="text/javascript" src="js/echarts-china-provinces/jiangsu.js"></script>
		<script type="text/javascript" src="js/echarts-china-cities/jiang1_su1_su1_zhou1.js"></script>
		<script type="text/javascript" src="js/echarts-china-counties/jiang1su1_su1zhou1_kun1shan1shi4.js"></script> -->
		<script type="text/javascript">
			$(function() {
				var app = new Vue({
					el:"#app",
					data:{
						machine:[{position:"防爆（蒸馏）",equi:"机封水泵",RUL:3.14,people:"张三",date:"2020-10-10"},
							{position:"防爆（蒸馏）",equi:"机封水泵",RUL:1.48,people:"张三",date:"2020-10-11"},
							{position:"防爆（蒸馏）",equi:"机封水泵",RUL:7.48,people:"李四",date:"2020-10-12"},
							{position:"防爆（蒸馏）",equi:"机封水泵",RUL:3.48,people:"张三",date:"2020-10-13"},
							{position:"防爆（蒸馏）",equi:"二精塔循环泵",RUL:3.48,people:"王五",date:"2020-12-14"},
							{position:"防爆（蒸馏）",equi:"二精塔循环泵",RUL:3.48,people:"张三",date:"2021-02-15"},
							{position:"防爆（蒸馏）",equi:"二精塔循环泵",RUL:3.48,people:"狗蛋",date:"2021-03-10"},
							{position:"防爆（蒸馏）",equi:"二精塔循环泵",RUL:3.48,people:"七七",date:"2021-04-10"},],
						dinary:[{idx:1,pst:"防爆（蒸馏）",eqt:"机封水泵",R:3.14,peo:"八八",dat:"2020-10-10"}]
					},
					methods:{
						update_dinary:function(item){
							// item,err,val
							var L = this.dinary.length+1;
							// console.log(L);
							this.dinary.push({idx:L,pst:item.position,eqt:item.equi,R:item.RUL,peo:item.people,dat:item.date});
							// this.dinary.push({idx:5,pst:"防爆（蒸馏）",eqt:"机封水泵",pot:"驱动端",err:"均方根值", val:5.27});
						},
						checking:function(){
							this.machine.forEach(element => {
								// console.log(element);
								this.update_dinary(element);
							});
						},
						clear:function(){
							this.dinary.splice(0,this.dinary.length);
						}
					}
				})

				/******************* 地图飞线 ******************/
			
				var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
				var fuyi = echarts.init(document.getElementById('fuyi'));
				var fuyi_option;

				var _panelImageURL = ROOT_PATH + '/data/asset/img/custom-gauge-panel.png';
				var _animationDuration = 1000;//动画持续时间
				var _animationDurationUpdate = 1000;
				var _animationEasingUpdate = 'quarticInOut';
				var _valOnRadianMax = 200;
				var _outerRadius = 100;
				var _innerRadius = 80;
				var _pointerInnerRadius = 40;
				var _insidePanelRadius = 70;
				var _currentDataIndex = 0;
				var rest = 1;

				function renderItem(params, api) {
					var valOnRadian = api.value(1);
					var coords = api.coord([api.value(0), valOnRadian]);
					var polarEndRadian = coords[3];
					var imageStyle = {
						image: _panelImageURL,
						x: params.coordSys.cx - _outerRadius,
						y: params.coordSys.cy - _outerRadius,
						width: _outerRadius * 2,
						height: _outerRadius * 2
					};

					return {
						type: 'group',
						children: [{
							type: 'image',
							style: imageStyle,
							clipPath: {
								type: 'sector',
								shape: {
									cx: params.coordSys.cx,
									cy: params.coordSys.cy,
									r: _outerRadius,
									r0: _innerRadius,
									startAngle: 0,
									endAngle: -polarEndRadian,
									transition: 'endAngle',
									enterFrom: { endAngle: 0 }
								}
							}
						}, {
							type: 'image',
							style: imageStyle,
							clipPath: {
								type: 'polygon',
								shape: {
									points: makePionterPoints(params, polarEndRadian)
								},
								extra: {
									polarEndRadian: polarEndRadian,
									transition: 'polarEndRadian',
									enterFrom: { polarEndRadian: 0 }
								},
								during: function (apiDuring) {
									apiDuring.setShape(
										'points',
										makePionterPoints(params, apiDuring.getExtra('polarEndRadian'))
									);
								}
							}
						}, {
							type: 'circle',
							shape: {
								cx: params.coordSys.cx,
								cy: params.coordSys.cy,
								r: _insidePanelRadius
							},
							style: {
								fill: '#fff',
								shadowBlur: 25,
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								shadowColor: 'rgba(76,107,167,0.4)'
							}
						}, {
							type: 'text',
							extra: {
								valOnRadian: valOnRadian,
								transition: 'valOnRadian',
								enterFrom: { valOnRadian: 0 }
							},
							style: {
								text: makeText(valOnRadian),
								fontSize: 50,
								fontWeight: 700,
								x: params.coordSys.cx,
								y: params.coordSys.cy,
								fill: 'rgb(0,50,190)',
								align: 'center',
								verticalAlign: 'middle',
								enterFrom: { opacity: 0 }
							},
							during: function (apiDuring) {
								apiDuring.setStyle('text', makeText(apiDuring.getExtra('valOnRadian')));
							}
						}]
					};
				}

				function convertToPolarPoint(renderItemParams, radius, radian) {
					return [
						Math.cos(radian) * radius + renderItemParams.coordSys.cx,
						-Math.sin(radian) * radius + renderItemParams.coordSys.cy
					];
				}

				function makePionterPoints(renderItemParams, polarEndRadian) {
					return [
						convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian),
						convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian + Math.PI * 0.03),
						convertToPolarPoint(renderItemParams, _pointerInnerRadius, polarEndRadian)
					];
				}

				function makeText(valOnRadian) {
					// Validate additive animation calc.
					if (valOnRadian < -10) {
						alert('illegal during val: ' + valOnRadian);
					}
					return (valOnRadian / _valOnRadianMax * 100).toFixed(0) + '%';
				}

				fuyi_option = {
					animationEasing: _animationEasingUpdate,
					animationDuration: _animationDuration,
					animationDurationUpdate: _animationDurationUpdate,
					animationEasingUpdate: _animationEasingUpdate,
					// title: {
					// 		text: '设备剩余服役寿命',
					// 		//subtext: 'Example in MetricsGraphics.js',
					// 		left: 'left',
					// 		padding: 15
					// 	},
					dataset: {
						source: [[1, 200]]
					},
					tooltip: {},
					angleAxis: {
						type: 'value',
						startAngle: 0,
						axisLine: { show: false },
						axisTick: { show: false },
						axisLabel: { show: false },
						splitLine: { show: false },
						min: 0,
						max: _valOnRadianMax
					},
					radiusAxis: {
						type: 'value',
						axisLine: { show: false },
						axisTick: { show: false },
						axisLabel: { show: false },
						splitLine: { show: false }
					},
					polar: {},
					series: [{
						type: 'custom',
						coordinateSystem: 'polar',
						renderItem: renderItem
					}]
				};

				setInterval(function () {
				    var nextSource = [[1, Math.round(Math.random() * _valOnRadianMax)]];
				    fuyi.setOption({
				        dataset: {
				            source: nextSource
				        }
				    });
				}, 10000);

				fuyi.setOption(fuyi_option); 

				// var formSelects = layui.formSelects;
				// formSelects.data('select1', 'local', {
				// 	arr: [
				// 		{
				// 			"name": "蒸馏（防爆）", 
				// 			"value": 1, 
				// 			"children": [
				// 				{"name": "机封水泵", "value": 12, "children": []},
				// 				{"name": "二精塔循环泵", "value": 17, "children": []},
				// 				{"name": "粗塔循环泵", "value": 18, "children": []},
				// 			]
				// 		},
				// 		{
				// 			"name": "饲料", 
				// 			"value": 2, 
				// 			"children": [
				// 				{"name": "风送（风机）", "value": 51, "children": []},
				// 			]
				// 		},
				// 		{
				// 			"name": "空压冷冻站", 
				// 			"value": 3, 
				// 			"children": [
				// 				{"name": "工艺空气压缩机", "value": 13, "children": []},
				// 				{"name": "仪表空气压缩机", "value": 14, "children": []},
				// 			]
				// 		},
				// 	],
				// 	linkage: true   //开启联动模式
				// });

                var app = {};
                var lishi = echarts.init(document.getElementById('lishi'),'dark');
                var lishi_option;

                lishi_option = {
                    title: {
                        text: '当前设备RUL预测历史信息',
                        left: 'left',
                        top:'bottom',
							padding: 15,
							textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
				//                 fontFamily: 'Arial, Verdana, sans...',
				                fontSize: 22,
				                fontStyle: 'normal',
				//                 fontWeight: 'normal',
				            },
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#283b56'
                            }
                        }
                    },
                    legend: {
						x:'right',      //可设定图例在左、右、居中
						y:'bottom',     //可设定图例在上、下、居中
                        padding:[0,40,20,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                        data:['温度', '剩余寿命']
                    },
                    // toolbox: {
                    //     show: true,
                    //     feature: {
                    //         dataView: {readOnly: false},
                    //         restore: {},
                    //         saveAsImage: {}
                    //     }
                    // },
                    dataZoom: {
                        show: false,
                        start: 0,
                        end: 100
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: true,
                            data: (function (){
                                var now = new Date();
                                var res = [];
                                var len = 10;
                                while (len--) {
                                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                                    now = new Date(now - 2000);
                                }
                                return res;
                            })()
                        },
                        {
                            type: 'category',
                            boundaryGap: true,
                            data: (function (){
                                var res = [];
                                var len = 10;
                                while (len--) {
                                    res.push(10 - len - 1);
                                }
                                return res;
                            })()
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            scale: true,
                            name: '温度/℃',
                            max: 30,
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        },
                        {
                            type: 'value',
                            scale: true,
                            name: '剩余寿命/h',
                            max: 1200,
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        }
                    ],
                    series: [
                        {
                            name: '剩余寿命',
                            type: 'bar',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: (function (){
                                var res = [];
                                var len = 10;
                                while (len--) {
                                    res.push(Math.round(Math.random() * 1000));
                                }
                                return res;
                            })()
                        },
                        {
                            name: '温度',
                            type: 'line',
                            data: (function (){
                                var res = [];
                                var len = 0;
                                while (len < 10) {
                                    res.push((Math.random()*10 + 5).toFixed(1) - 0);
                                    len++;
                                }
                                return res;
                            })()
                        }
                    ]
                };

                app.count = 11;
                setInterval(function (){
                    var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

                    var data0 = lishi_option.series[0].data;
                    var data1 = lishi_option.series[1].data;
                    data0.shift();
                    data0.push(Math.round(Math.random() * 1000));
                    data1.shift();
                    data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

                    lishi_option.xAxis[0].data.shift();
                    lishi_option.xAxis[0].data.push(axisData);
                    lishi_option.xAxis[1].data.shift();
                    lishi_option.xAxis[1].data.push(app.count++);

                    lishi.setOption(lishi_option);
                }, 100100);

                lishi.setOption(lishi_option);


				// console.log(document.getElementById('qushixian'))
				var qushixian = echarts.init(document.getElementById('qushixian'));
				var qushixian_option;

				qushixian.showLoading();
				$.get(ROOT_PATH + '/data/asset/data/confidence-band.json', function (data) {
					qushixian.hideLoading();

					var base = -data.reduce(function (min, val) {
						return Math.floor(Math.min(min, val.l));
					}, Infinity);
					qushixian.setOption(qushixian_option = {
						title: {
							text: '剩余寿命趋势预测',
							//subtext: 'Example in MetricsGraphics.js',
							left: 'left',
							padding: 15,
							textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
				//                 fontFamily: 'Arial, Verdana, sans...',
				                fontSize: 22,
				                fontStyle: 'normal',
				//                 fontWeight: 'normal',
								color: '#fcfcfcc4' 
				            },
						},
						// 图例
						legend: {
							orient: 'horizontal',          // 布局方式，默认为水平布局，可选为：
											// 'horizontal' ¦ 'vertical'
							x: 'right',                // 水平安放位置，默认为全图居中，可选为：
													// 'center' ¦ 'left' ¦ 'right'
											// ¦ {number}（x坐标，单位px）
							y: 'top',              // 垂直安放位置，默认为全图顶端，可选为：
											// 'top' ¦ 'bottom' ¦ 'center'
											// ¦ {number}（y坐标，单位px）
							backgroundColor: 'rgba(0,0,0,0)',
							borderColor: '#ccc',            // 图例边框颜色
							borderWidth: 0,                // 图例边框线宽，单位px，默认为0（无边框）
							padding: 25,                  // 图例内边距，单位px，默认各方向内边距为5，
													// 接受数组分别设定上右下左边距，同css
							itemGap: 10,              // 各个item之间的间隔，单位px，默认为10，
												// 横向布局时为水平间隔，纵向布局时为纵向间隔
							itemWidth: 20,             // 图例图形宽度
							itemHeight: 14,            // 图例图形高度
							textStyle: {
								color: '#fcfcfcc4'                              // 图例文字颜色
							}
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								animation: false,
								label: {
									backgroundColor: '#ccc',
									borderColor: '#aaa',
									borderWidth: 1,
									shadowBlur: 0,
									shadowOffsetX: 0,
									shadowOffsetY: 0,

									color: '#222'
								}
							},
							formatter: function (params) {
								return params[2].name + '<br />' + ((params[2].value - base) * 100).toFixed(1) + '%';
							}
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: data.map(function (item) {
								return item.date;
							}),
							axisLabel: {
								formatter: function (value, idx) {
									var date = new Date(value);
									return idx === 0 ? value : [date.getMonth() + 1, date.getDate()].join('-');
								},
								color: '#fcfcfcc4'
							},
							boundaryGap: false
						},
						yAxis: {
							axisLabel: {
								formatter: function (val) {
									return (val - base) * 100 + '%';
								},
								color: '#fcfcfcc4'
							},
							axisPointer: {
								label: {
									formatter: function (params) {
										return ((params.value - base) * 100).toFixed(1) + '%';
									}
								}
							},
							splitNumber: 3
						},
						series: [{
							// name: 'L',
							type: 'line',
							data: data.map(function (item) {
								return item.l + base;
							}),
							lineStyle: {
								opacity: 0
							},
							stack: 'confidence-band',
							symbol: 'none'
						}, {
							name: '置信区间',
							type: 'line',
							color: 'DodgerBlue',
							data: data.map(function (item) {
								return item.u - item.l;
							}),
							lineStyle: {
							opacity: 0
							},
							areaStyle: {
								color: 'DodgerBlue'
							},
							stack: 'confidence-band',
							symbol: 'none'
						}, {
							name: '预测值',
							type: 'line',
							data: data.map(function (item) {
								return item.value + base;
							}),
							hoverAnimation: false,
							symbolSize: 6,
							itemStyle: {
								color: 'Cyan'
							},
							showSymbol: false
						}]
					});
				});

				qushixian_option && qushixian.setOption(qushixian_option);
              
                myColumns = dataColumns()[0];
                // tex = dataColumns()[1];
                // console.log(tex);

                var myChart = echarts.init(document.getElementById('new_line'),'dark');
                myChart.clear();

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: dataColumns()[1],
                        //subtext: 'Example in MetricsGraphics.js',
                        left: 'center',
                        padding: 15,
                        textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                            //                 fontFamily: 'Arial, Verdana, sans...',
                                fontSize: 22,
                                fontStyle: 'normal',
                //                 fontWeight: 'normal',
                            color: '#fcfcfcc4' 
                            },
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        name: '时间/h',
                        nameLocation:'end',
                        data: myColumns.columns,
                        axisLabel: {
                            color: '#fcfcfcc4'
                        },
                    },
                    yAxis: {
                        type: 'value',
                        name: '健康指标',
                        nameLocation:'end',
                        axisLabel: {
                            color: '#fcfcfcc4'
                        },
                    },
                    series: [{
                        data: myColumns.data,
                        type: 'line',
                        symbol: 'none',  //取消折点圆圈
                        color: "cyan",
                    }],
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);                   				

				/********** 浏览器窗口改变时，重置报表大小 ****************/
				window.onresize = function() {
                    console.log("窗口发生改变了哟！");
					fuyi.resize();
                    lishi.resize();
					qushixian.resize();
                    myChart.resize();
				}
			});
		</script>
		
		
	</body>
</html>